<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../static/knockout-3.3.0.js"></script>

</head>
<body>
	<p>
		Your country: <select
			data-bind="options: availableCountries,
                   optionsText: function(item) {
                       return item.countryName + ' (pop: ' + item.countryPopulation + ')'
                   },
                   value: selectedCountry,
                   optionsCaption: 'Choose...'"></select>
		<!--  <selectd
			data-bind="options: availableCountries, 
　　　　　　　　　　　　　　optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select> -->
	</p>

	<div data-bind="visible: selectedCountry">
		<!-- Appears when you select something -->
		You have chosen a country with population <span
			data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
	</div>

	<script type="text/javascript">
		// Constructor for an object with two properties
		var country = function(name, population) {
			this.countryName = name;
			this.countryPopulation = population;
		};

		var viewModel = {
			availableCountries : ko.observableArray([
					new country("UK", 65000000), new country("USA", 320000000),
					new country("Sweden", 29000000) ]),
			selectedCountry : ko.observable()
		// Nothing selected by default
		};
		ko.applyBindings(viewModel);
	</script>
</body>
</html>